import React, { Component } from 'react'
import '../css/home.css'
import {
    SearchOutlined,
    RightOutlined,
} from '@ant-design/icons';
import { Carousel } from 'antd';
import s2 from '../imgs/2.png'
import s3 from '../imgs/3.png'
import s4 from '../imgs/4.png'
import s5 from '../imgs/5.png'
import s6 from '../imgs/6.png'
import s7 from '../imgs/7.png'
import s8 from '../imgs/8.png'
import s10 from '../imgs/10.png'
import s11 from '../imgs/11.png'
import s12 from '../imgs/12.png'
import s13 from '../imgs/13.png'
import s14 from '../imgs/14.png'

const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};

export default class Home extends Component {
    render() {
        return (
            <div className='home'>
                <div className='header'>
                    {/* 搜索 */}
                    <div className="input">
                        <div className='icon'>
                            <SearchOutlined />
                        </div>
                        <input placeholder="甲状腺"></input>
                    </div>
                </div >
                <div className='main'>
                    {/* 轮播图 */}
                    <div className='swiper'>
                        <Carousel autoplay className='swper'>
                            <div>
                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=2797051290,4256504559&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=383"></img></h3>
                            </div>
                            <div>
                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=982930916,430043612&fm=26&fmt=auto"></img></h3>
                            </div>
                            <div>
                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=2346747520,75989769&fm=26&fmt=auto"></img></h3>
                            </div>
                            <div>
                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=566612422,3852580636&fm=253&fmt=auto&app=120&f=PNG?w=900&h=383"></img></h3>
                            </div>
                        </Carousel>
                    </div>

                    {/* 提问 */}
                    <div className='rapid'>
                        <li>
                            <img src={s2}></img>
                            <div>
                                <span>快速提问</span>
                                <span>智能匹配医生</span>
                            </div>
                        </li>
                        <li>
                            <img src={s3}></img>
                            <div>
                                <span>找医生</span>
                                <span>全中国60万+名医</span>
                            </div>
                        </li>
                    </div>
                    {/* 图文混排 */}
                    <div className='synch'>
                        <li>
                            <span><img src={s4}></img></span>
                            <span>找医院</span>
                        </li>
                        <li>
                            <span><img src={s5}></img></span>
                            <span>名院专家</span>
                        </li>
                        <li>
                            <span><img src={s6}></img></span>
                            <span>快速购药</span>
                        </li>
                        <li>
                            <span><img src={s7}></img></span>
                            <span>图文急诊</span>
                        </li>
                        <li>
                            <span><img src={s8}></img></span>
                            <span>快捷电话</span>
                        </li>
                    </div>

                    <div className="activ">
                        <span>美洽活动</span>
                        &emsp;
                        <span>世界骨关节炎日，专家在线免费义诊</span>
                    </div>
                    {/* 特色科室 */}
                    <div className="office">
                        <div className="office_one">
                            <span>特色科室</span>
                            <span>查看全部<RightOutlined className="icon" /></span>
                        </div>
                        <div className="office_two">
                            <div className='int_one'>
                                <img src={s10}></img>
                                <div>
                                    <span><img src={s11}></img></span>
                                    <span><img src={s12}></img></span>
                                </div>
                            </div>
                            <div className="school">
                                <span><img src={s13}></img></span>
                                <span><img src={s14}></img></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
